<template>
  <div class="ProductList">
    <div class="product-list-content">
      <header class="category-header wrap">
        <i class="nbicon nbfanhui" @click="goback"></i>
        <div class="header-search">
          <i class="nbicon nbSearch"></i>
          <input type="text" class="search-title" v-model="keyword" />
        </div>
        <span class="search-btn" @click="getSearch">搜索</span>
      </header>
      <van-tabs type="card" color="#1baeae" @click="changeTab">
        <van-tab title="推荐" name=""></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        class="product-list-refresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="productList.length ? '没有更多了' : '搜索想要的商品'"
          @load="onLoad"
          @offset="10"
        >
          <!-- <p v-for="item in list" :key="item">{{ item }}</p> -->
          <template v-if="productList.length">
            <div
              class="product-item"
              v-for="(item, index) in productList"
              :key="index"
              @click="productDetail(item)"
            >
              <img :src="$filters.prefix(item.goodsCoverImg)" />
              <div class="product-info">
                <p class="name">{{ item.goodsName }}</p>
                <p class="subtitle">{{ item.goodsIntro }}</p>
                <span class="price">￥ {{ item.sellingPrice }}</span>
              </div>
            </div>
          </template>
          <img
            class="empty"
            v-else
            src="//s.yezgea02.com/1604041313083/kesrtd.png"
            alt="搜索"
          />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { search } from '../api/goods';
export default {
  name: "ProductList",
  setup() {
      const route = useRoute()
      const router = useRouter()
      const state = reactive({
          productList: [],
          keyword: route.query.keyword || '',
          finished: false,
          loading: false,
          page: 1,
          orderBy: '',
          totalPage: 0,
          refreshing: false
      })
      onMounted(() => {
          
          console.log(route.query.categoryId)
          init()
      })
      const goback = () => {
          router.go(-1)
      }
      const init = async () => {
          const { categoryId } = route.query
          if (!categoryId && !state.keyword) {
              state.finished = true
              state.loading = false
              return
          }
          const { data, data: { list } } = await search({ pageNumber: state.page, goodsCategoryId: categoryId, keyword: state.keyword, orderBy: state.orderBy })
          console.log(data,'data')
          state.productList = state.productList.concat(list)
          state.totalPage = data.totalPage
          state.loading = false
          if (state.page >= data.totalPage) state.finished = true
      }
      const getSearch = () => {
          onRefresh()
      }
      // 切换Tab栏
      const changeTab = (name) => {
          console.log(name,'name')
          state.orderBy = name
          onRefresh()
      }
      // 下拉刷新
      const onRefresh = () => {
          state.refreshing = true
          state.finished = false
          state.loading = true
          state.page = 1
          onLoad()
      }
      // 加载
      const onLoad = () => {
          if (!state.refreshing && state.page < state.totalPage) {
              state.page = state.page + 1
          }
          if (state.refreshing) {
              state.productList = []
              state.refreshing = false
          }
          init()
      }
      // 详情页
      const productDetail = (item) => {
          router.push({path: `/product/${item.goodsId}`})
      }
      return {
          ...toRefs(state),
          goback,
          getSearch,
          changeTab,
          onRefresh,
          onLoad,
          productDetail
      }
  },
};
</script>

<style lang='less' scoped>
@import "../common/style/mixin.less";
.product-list-content {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  .category-header {
    .fj();
    width: 100%;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    .boxSizing();
    font-size: 15px;
    color: #656771;
    z-index: 10000;
    &.active {
      background-color: @primary;
    }
    .icon-left {
      font-size: 25px;
      font-weight: bold;
    }
    .header-search {
      display: flex;
      width: 76%;
      height: 20px;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px 0;
      color: #232326;
      background-color: #f7f7f7;
      .borderRadius(20px);
      .nbSearch {
        padding: 0 5px 0 20px;
        font-size: 17px;
      }
      .search-title {
        font-size: 12px;
        color: #666;
        background-color: #f7f7f7;
      }
    }
    .icon-More {
      font-size: 20px;
    }
    .search-btn {
      height: 28px;
      margin: 8px 0;
      line-height: 28px;
      padding: 0 5px;
      color: #fff;
      background-color: @primary;
      .borderRadius(5px);
      margin-top: 10px;
    }
  }
}
.content {
    height: calc(100vh - 70px);
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 78px;
}
.product-list-refresh {
    .product-item {
        .fj();
        width: 100%;
        height: 120px;
        padding: 10px 0;
        border-bottom: 1px solid #dcdcdc;
        img {
            width: 140px;
            height: 120px;
            padding: 0 10px;
            .boxSizing();
        }
        .product-info {
            width: 56%;
            height: 120px;
            padding: 5px;
            text-align: left;
            .boxSizing();
            p {
                margin: 0;
            }
            .name {
                width: 100%;
                max-height: 40px;
                font-size: 15px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .subtitle {
                width: 100%;
                max-height: 20px;
                padding: 10px 0;
                line-height: 25px;
                font-size: 13px;
                color: #999;
                overflow: hidden;
            }
            .price {
                color: @primary;
                font-size: 16px;
            }
        }
    }
    .empty {
        display: block;
        width: 150px;
        margin: 50px auto 20px;
    }
}
</style>